<template>
  <div>
  <Header></Header>
    <!--游记详情开始-->
    <div class="detailBox w1200 bc" >
      <!--详情顶部-->
      <div class="detailTop  bg100 mt20  pt30 pb30 pr30 pl30  clearfix">
        <div class="topLeft h80 fl">
          <img class="fl userHeadPic" :src="detail['imgUrl']" alt="" width="80" height="80" />
          <div class="fl ml20">
            <h2 class="fm-yahei f24  c20 lh200">{{detail['nickName']}}</h2>
            <p class=" fm f14 c60 lh150">{{detail['addtime']}}</p>
          </div>
        </div>
        <div class="topRight mt10 fr ">
          <dl class="w100 tc fl">
            <dt><img src="static/images/eye.png" alt=""  width="24" height="24"/></dt>
            <dd class="mt15 c40 f14 fm-songti lh100">{{detail['pageView']}}已阅读</dd>
          </dl>
          <dl class="w100 tc fl">
            <dt><img :src="followStatus===1?'static/images/star_shi.png':'static/images/star.png'" alt=""  width="24" height="24" @click="followFun"/></dt>
            <dd  class="mt15 c40 f14 fm-songti lh100"  @click="followFun">收藏</dd>
          </dl>
          <dl class="w100 tc fl">
            <dt><img src="static/images/open-png.png" alt=""  width="24" height="24"/></dt>
            <dd  class="mt15 c40 f14 fm-songti lh100">分享</dd>
          </dl>
        </div>
      </div>
      <div class="detailMiddle pt30 pb50 pr30 pl30 mt5 bg100">
        <p v-if="detail['Summarize']" class="summarize">
          {{detail['Summarize']}}
        </p>
        <div v-for="item in detail['listTravelsResource']" class="detailItem">
            <div v-if="item['flag']===0">
              <pre>{{item['description']}}</pre>
            </div>
            <div v-else-if="item['flag']===1" style="padding-top:10px;margin-bottom:10px;">
              <img v-lazy="item['fileName']+'?x-oss-process=image/watermark,text_6LaK6YeO5L6g,t_80,g_se,x_20,y_20,size_30,color_ffffff'" alt="">
              <p class="picDes" v-if="item['description']!='' && item['description'] != null">{{item['description']}}</p>
            </div>
            <div v-else class="videoBox" style="padding-top:10px;margin-bottom:10px;">
              <img v-lazy="item['thumFileName']" alt="">
              <p class="picDes" v-if="item['description']!='' && item['description'] != null">{{item['description']}}</p>
              <p class="playBox">
                <span class="playBtn" @click="playVideo" :videoId="item['fileName']"></span>
              </p>
            </div>
        </div>
      </div>
      <div class="detailBottom mt5 clearfix ">
        <div class="bottomLeft w1200 fl pt30 pb50 bg100 ">
          <comment @loading="getComments" @getOver="getOver" my-main-score="false" my-diff="false" :my-urls="urls" :my-req-data="reqData" :my-thumb-data="thumbData" my-thumb-key="travelsID" my-pic-list-key="listTravelscommentresourceInfo"></comment>
        </div><!--bottomLeft结束-->
      </div><!--detailBottom结束-->
    </div><!--detailBox结束-->
    <Footer></Footer>
    <Loading v-show="loadState"></Loading>
    <div id="videoShadow" v-if="playState" @click="closeVideo">
      <div id="videoPlayBox" @click="stopMaopao">
         <playVideo :videoID="videoId" :auto-play="true"></playVideo>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from '../../components/header';
  import Footer from '../../components/footer';
  import Util from "../../assets/Util";
  import Loading from '../../components/loading';
  import playVideo from '../../components/playVideo';
  import comment from "../../components/comments";
  export default {
      name: "travelDetail",
      data(){
        return{
          detail:{},
          followStatus:0,
          loadState:true,
          travelsID:0,
          pageIndex:1,
          pageSize:8,
          videoId:"87fe980835cf43b8885754157443dc74",
          playState:false,
          urls:{
            commentUrl:"/Travelscomment/GetList",
            thumbUrl : "/Travelscomment/AddPraise",
            subCommentUrl: "/Travelscomment/AddComment"
          },
          reqData:{
            "travelsID": this.$route.query.id,
            "userID": localStorage.getItem("uId"),
            "pageIndex": 0,
            "pageSize": 15,
            "clientType":'pc'
          },
          thumbData:{
            "userID": localStorage.getItem("uId"),
            "commentID": 0,
            "token": localStorage.getItem("token"),
            "type": 0,
            "travelsID": this.$route.query.id
          }
        }
      },
      components:{
        Header,
        Footer,
        Loading,
        playVideo,
        comment
      },
      mounted(){
        this.getQuery();
      },
      methods:{
        // 获取地址栏参数
        getQuery(){
          this.travelsID = this.$route.query.id;
          this.gettravelDetail();
        },
        // 评论翻页动画
        getComments() {
          this.loadState = true;
        },
        getOver(){
          this.loadState = false;
        },
        gettravelDetail(){
          let that = this;
          let props = {
            "url":"/Travels/GetDetail",
            "data":{
              travelsID:this.travelsID,
              pageIndex:this.pageIndex,
              pageSize:this.pageSize,
              userID:localStorage.getItem("uId")
            },
            sCallBack:(res) => {
                if(res.status === 200){
                    this.detail = res.data.data;
                    this.followStatus = res.data.data.followStatus;
                    setTimeout(function () {
                      that.loadState = false;
                    }, 500)
                }else{
                  console.log("network error");
                }
            },
            eCallBack:(err) => {
                console.log(err);
            }
          };
          Util.myRequest(props);
        },
        playVideo: function (e) {
          this.playState = true
          let VideoID = e.target.getAttribute('videoId')
          this.videoId = VideoID
          setTimeout(function () {
            let oPlayBox = document.getElementById('videoPlayBox')
            oPlayBox.style.display = "block";
            oPlayBox.setAttribute('class', 'animated bounceInDown')
          }, 100);
        },
        closeVideo(){
          let that = this;
          let oPlayBox = document.getElementById('videoPlayBox')
          oPlayBox.setAttribute('class', 'animated rotateOut')
          setTimeout(function () {
            oPlayBox.style.display = "none";
            that.playState = false;
          }, 500);
        },
        stopMaopao(e){
          e.stopPropagation();
        },
        followFun(e){
          let data = {
            "travelsID": this.travelsID,
            "token": localStorage.getItem('token'),
            "userID": localStorage.getItem("uId"),
            "type": Math.abs(this.followStatus - 1)
          }
          let props = {
            url:'/Travels/AddFollow',
            data:data,
            sCallBack:res => {
              this.followStatus = Math.abs(this.followStatus - 1);
              this.$message.success("操作成功");
            },
            eCallBack:err => {
              console.log(err);
            }
          }
          Util.myRequest(props);
        }
      }
  }
</script>

<style scoped>
  @import "../../assets/animate.min.css";
  .commentList{
    text-align: justify;
  }
  .subCommonBtn:hover{
    background-color:#e0613a;
  }
  .thumbBtn{
    width:90px;
    margin-top:15px;
    text-align: left;
  }
  .thumbBtn img{
    vertical-align: middle;
  }
  .userHeadPic{
    border-radius:50%;
  }
  .detailMiddle img{
    display:block;
    margin:0px auto;
    max-width: 100%;
  }
  .detailItem {
    width:100%;
    background:#eee;
  }
  .detailMiddle pre{
    display: block;
    font-family: "Microsoft YaHei";
    margin: 1em 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height:25px;
    font-size:14px;
  }
  .videoBox{
    position:relative;
  }
  .playBox{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    /*background:rgba(0,0,0,0.7);*/
  }
  .playBtn{
    width:70px;
    height:70px;
    background-size:100%;
    background-image: url("../../../static/images/play.png");
    cursor:pointer;
  }
  #videoShadow{
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    position: fixed;
    top:0px;
    left:0px;
    z-index:99999;
  }
  #videoPlayBox{
    width:600px;
    height:480px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-240px;
    margin-left:-300px;
    padding:6px;
    background:rgba(221,221,221,0.4);
    border-radius:8px;
    display:none;
  }
  .summarize{
    line-height:30px;
    font-size:14px;
    text-indent:2em;
  }
  .picDes{
    text-align: center;
    padding:10px 0px;
    background:#333;
    color:#fff;
    font-size:14px;
  }
</style>
